<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="preview-box__box">
        <page-card v-if="!inlineModel">
            <template v-slot:label>
                <div class="preview-box__title">
                    <div class="preview-box__text">表格预览</div>
                    <div class="preview-box__btn" v-if="previewModel === 'single'">
                        <el-button plain :disabled="false" @click="handleClick">切换手机端预览</el-button>
                    </div>
                </div>
            </template>
        </page-card>
        <div class="preview-box__header" v-if="inlineModel">
            <div class="preview-box__header-title">标题：{{model.name || "-"}}</div>
            <div class="preview-box__header-desc">描述：{{model.desc || "-"}}</div>
        </div>
        <div class="preview-box__table">
            <ul class="preview-box__th">
                <template v-for="item in data">
                    <li class="preview-box__td" :key="item._key">
                        {{item.name}}{{item.unit ? '('+item.unit+')':''}}
                    </li>
                </template>
            </ul>
            <div class="preview-box__tbody">
                <ul class="preview-box__tr">
                    <template v-for="item in data">
                        <li class="preview-box__td" :key="item._key">
                            <template v-if="item.typeValue === 'select' || item.typeValue === 'cascader'">
                                <el-select disabled v-model="select" placeholder="请选择"></el-select>
                            </template>
                            <template v-if="item.typeValue === 'location'">
                                <el-button plain>定位</el-button>
                            </template>
                            <template v-if="item.typeValue.indexOf('upload') !== -1">
                                <el-button plain>{{item.type}}</el-button>
                            </template>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class PreviewTable extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly data!: any | any[];


    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly model!: any;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly inlineModel!: boolean;

    @Prop({
        type: String,
        default: "single"
    })
    readonly previewModel!: string;

    select = "";

    handleClick() {
        this.$emit("change", "form");
    }
}
</script>
